<include file="common:__head__"/>
<style type="text/css">
    .editing {border:2px dashed #0ba4da;}
</style>
<body>
<div class="permissions-tabs">
    <a class="role tabs-bg" href="{:U('Diy/index')}">DIY主页设置</a>
</div>

<div style="margin:15px 0 40px 15px;">
    <div class="mobile ml100">
        <div class="m_head"><p>主页</p></div>
        <form id="diy_form" action="{:U('Diy/page_set')}" method="post" enctype="multipart/form-data">
            <input type="hidden" name="position_mod" value="" id="position_mod"/>
            <input type="hidden" name="page_code" value="index"/>
            <div class="m_body">

                {$temps_html}

            </div>
        </form>
        <p class="clear"></p>
    </div>
    <div class="items w150">
        <ul>
            <foreach name="items" item="itm">
                <li data-id="{$itm.item_id}" data-code="{$itm.item_code}">{$itm.item_name}</li>
            </foreach>
        </ul>
    </div>
    <p class="save_diy"><a class="btn-lg btn-blue" id="save_btn">保存</a></p>

    <div class="show_list">
        <div class="goods">
            <i class="fa fa-close close_list"></i>
            <table cellspacing="0" cellpadding="0" class="goods_title">
                <tr>
                    <td colspan="6">
                        <input type="text" id="g_name" class="w150"/>
                        <button onclick="ajax_get_table(1);"><i class="fa fa-search"></i>搜索</button>
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;">ID</td>
                    <td style="width:80px;">图片</td>
                    <td style="width:150px;">商品名称</td>
                    <td style="width:100px;">货号</td>
                    <td style="width:100px;">添加时间</td>
                    <td style="width:100px;">操作</td>
                </tr>
            </table>
            <div id="ajax_return_goods"></div>
        </div>
        <div class="cates">
            <i class="fa fa-close close_list"></i>
            <table cellspacing="0" cellpadding="0" class="goods_title">
                <tr>
                    <td colspan="6">
                        <input type="text" id="cate_name" class="w150"/>
                        <button  onclick="ajax_getcate_table(1);"><i class="fa fa-search"></i>搜索</button>
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;">ID</td>
                    <td style="width:80px;">图片</td>
                    <td style="width:150px;">商品名称</td>
                    <td style="width:100px;">操作</td>
                </tr>
            </table>
            <div id="ajax_return_cates"></div>
        </div>
    </div>
    <div class="choises_list">
        <div class="goods">
            <i class="fa fa-close close_list"></i>
            <table cellspacing="0" cellpadding="0" class="goods_title">
                <tr>
                    <td colspan="6">
                        <input type="text" id="gname" class="w150"/>
                        <button onclick="ajax_choisegoods_table(1);"><i class="fa fa-search"></i>搜索</button>
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;">ID</td>
                    <td style="width:80px;">图片</td>
                    <td style="width:150px;">商品名称</td>
                    <td style="width:100px;">货号</td>
                    <td style="width:100px;">添加时间</td>
                    <td style="width:100px;">操作</td>
                </tr>
            </table>
            <div id="ajax_choises_goods"></div>
        </div>
    </div>
    <div class="cates_choise_list">
        <div class="goods">
            <i class="fa fa-close close_list"></i>
            <table cellspacing="0" cellpadding="0" class="goods_title">
                <tr>
                    <td colspan="3">
                        <input type="text" id="cname" class="w150"/>
                        <button onclick="ajax_choisecats_table(1);"><i class="fa fa-search"></i>搜索</button>
                    </td>
                </tr>
                <tr>
                    <td style="width:70px;">ID</td>
                    <td style="width:150px;">类目名称</td>
                    <td style="width:100px;">操作</td>
                </tr>
            </table>
            <div id="ajax_choises_cates"></div>
        </div>
    </div>
    <p class="clear"></p>
</div>
<script type="text/javascript" src="./Public/plugins/colpick/js/colpick.js"></script>
<script type="text/javascript">
    var link_code = "";
    var nodeid = 0;
    $(".mobile .m_body").sortable({
        containment: 'parent',
        opacity: 0.7
    });

    // 删除操作
    function del(obj) {
        layer.confirm('确认删除？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                // 确定
                $(obj).parent(".mod_list").remove();
                layer.msg('已移除', {time: 500});
            }
        );
    }

    $(document).ready(function(){

        $('#picker').colpick({
            layout:'hex',
            colorScheme:'dark',
            submit:0,
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });


        $('.items li').click(function(){
            $mod_id = $(this).data("id");
            $mod_key = $(this).data("code");
            $nums = $(".m_body .mod_list").length;
            $.ajax({
                url: "{:U('Diy/item_mods')}",
                type: 'post',
                data: {itm_k: $mod_key,node_num :$nums},
                success: function (data) {
                    if (data.status == "success") {
                        $(".m_body .mod_list").removeClass("editing");
                        $(".m_body .mod_list .edit_form").hide();
                        $(".m_body").append( data.itm );
                        $(".m_body .mod_list").eq($nums).addClass("editing");
                    } else {
                        layer.msg(data.msg, {time: 1500});
                    }
                }
            });
        });

        $(document).on("click" ,'.m_body .mod_list' ,function(){
            nodeid = $(this).data("sort");
            $(".m_body .mod_list").removeClass("editing");
            $(".m_body .mod_list .edit_form").hide();
            $(this).addClass("editing");
            $(this).find(".edit_form").show();
        });

        // 再加一张
        $(document).on("click" ,'.m_body .mod_list .add_more' ,function(){
            $mod_sort = $(this).data("sort");
            $mod_key = $(this).data("key");
            $mod_len = $(this).parents(".mod_list").find(".single_img").last().data("index");
            $this_mod = $(this);
            $.ajax({
                url: "{:U('Diy/add_more_img')}",
                type: 'post',
                data: {key: $mod_key,sort :$mod_sort ,img_len:($mod_len + 1)},
                success: function (data) {
                    if (data.status == "success") {
                        $this_mod.parent(".edit_form").append( data.itm );
                    } else {
                        layer.msg(data.msg, {time: 1500});
                    }
                }
            });
        });

        // 再加一条
        $(document).on("click" ,'.m_body .mod_list .add_notice' ,function(){
            $mod_sort = $(this).data("sort");
            $mod_len = $(this).parents(".mod_list").find(".single_notice").last().data("index");
            $this_mod = $(this);
            $.ajax({
                url: "{:U('Diy/add_more_notice')}",
                type: 'post',
                data: {sort :$mod_sort ,notice_len:($mod_len + 1)},
                success: function (data) {
                    if (data.status == "success") {
                        $this_mod.parent(".edit_form").append( data.itm );
                    } else {
                        layer.msg(data.msg, {time: 1500});
                    }
                }
            });
        });

        $(document).on("click" ,'.select_btn' ,function(){
            $good_id = $(this).data("id");
            $good_name = $(this).data("gname");
            $(".goods_name_" + link_code).val($good_name);
            $(".goods_p" + link_code).show();
            $(".goods_id_" + link_code).val($good_id);
            $(".cates_p" + link_code).hide();
            $(".show_list").hide();
        });

        $(document).on("click" ,'.close_list' ,function(){
            $(".goods_id").prop("checked" ,false);
            $(".cats_id").prop("checked" ,false);
            $(".show_list").hide();
            $(".choises_list").hide();
            $(".cates_choise_list").hide();
        });

        $(document).on("click" ,'.select_cate_btn' ,function(){
            $cate_id = $(this).data("id");
            $cate_name = $(this).data("cname");
            $(".cates_name_" + link_code).val($cate_name);
            $(".cates_p" + link_code).show();
            $(".cates_id_" + link_code).val($cate_id);
            $(".goods_p" + link_code).hide();
            $(".show_list").hide();
        });

        $(document).on("click" ,'.close_this_img span' ,function(){
            $_this = $(this);
            layer.confirm('确认移除？', {
                        btn: ['确定', '取消'] //按钮
                    }, function () {
                        $_this.parents(".single_img,.single_notice").remove();
                        layer.msg('已移除', {time: 500});
                    }
            );
        });

        $(document).on("click" ,'.diy_ul li input' ,function(){
            $module_id = $(this).val();
            $sort = $(this).data("sort");
            $this_mod = $(this);
            $.ajax({
                url: "{:U('Diy/get_module')}",
                type: 'post',
                data: {module: $module_id,sort :$sort},
                success: function (data) {
                    if (data.status == "success") {
                        $this_mod.parents(".edit_form").find(".diy_module").html("");
                        $this_mod.parents(".edit_form").find(".diy_module").html( data.itm );
                        $.ajax({
                            url: "{:U('Diy/get_module_img')}",
                            type: 'post',
                            data: {module: $module_id,sort :$sort},
                            success: function ( e ) {
                                if (e.status == "success") {
                                    $this_mod.parents(".mod_list").find(".table_html").html("");
                                    $this_mod.parents(".mod_list").find(".table_html").html( e.itm );
                                } else {
                                    layer.msg(e.msg, {time: 1500});
                                }
                            }
                        });
                    } else {
                        layer.msg(data.msg, {time: 1500});
                    }
                }
            });
        });

        $(document).on("change" ,'.m_body .mod_list .set_link' ,function(){
            $link_id = $(this).val();
            link_code = $(this).data("sort");
            if($link_id == 0||$link_id == 1||$link_id ==2){
                $(".cates").hide();
                $(".goods").hide();
                $(".show_list").hide();
                $(".goods_p" + link_code).hide();
                $(".cates_p" + link_code).hide();
            }
            // 商品详情
            if($link_id == 4){
                $(".cates").hide();
                $(".goods").show();
                $(".show_list").show();
            }
            // 商品分类
            if($link_id == 3){
                $(".goods").hide();
                $(".cates").show();
                $(".show_list").show();
            }
            // 外部链接
            if($link_id == 5){
                $(this).parent("p").next(".out_link").show();
                $(".goods_p" + link_code).hide();
                $(".cates_p" + link_code).hide();
            }else{
                $(this).parent("p").next(".out_link").hide();
            }
        });

        $(document).on("click" ,'.m_body .mod_list .add_goods' ,function(){
            $(".choises_list").show();
        });
        $(document).on("click" ,'.m_body .mod_list .choise_cates' ,function(){
            $(".cates_choise_list").show();
        });

        $(document).on("click" ,'.m_body .mod_list .remove_goods' ,function(){
            $(this).parent("p").remove();
            $gid = $(this).next("input").val();
            $("#goods" + nodeid + " .goodsindex_" + $gid).remove();
        });

        $(document).on("click" ,".confirm_btn" ,function(){
            var goods_ids = new Array();
            var str = "";
            $goods_ids_num = $(".goods_id").length;
            for($i = 0; $i < $goods_ids_num ;$i ++){
                if($(".goods_id").eq($i).prop("checked") == true){
                    $gid = $(".goods_id").eq($i).val();
                    $gname = $(".goods_id").eq($i).data("gname");
                    goods_ids.push($gid);
                    str += "<p><span>" + $gname +"</span>" +
                            "<i class='fa fa-close remove_goods'></i>" +
                            "<input type='hidden' name='goods_"+nodeid+"[g_id][]' value='"+ $gid +"'/></p>";
                }
            }
            goods_ids.join(',');
            if(goods_ids == ""){
                layer.alert("未选商品");return false;
            }
            var goods_show_style = $(".gs_" + nodeid + ":checked").val();
            ajax_goods_table(goods_show_style, goods_ids ,str ,1);
        });

        $(document).on("click" ,".confirm_btn_cats" ,function(){
            var cats_ids = new Array();
            var str = "";
            $cats_ids_num = $(".cats_id").length;
            for($i = 0; $i < $cats_ids_num ;$i ++){
                if($(".cats_id").eq($i).prop("checked") == true){
                    $cid = $(".cats_id").eq($i).val();
                    $cname = $(".cats_id").eq($i).data("cname");
                    cats_ids.push($cid);
                    str += "<p><span>" + $cname +"</span>" +
                            "<i class='fa fa-close remove_goods'></i>" +
                            "<input type='hidden' name='goods_"+nodeid+"[c_id][]' value='"+ $cid +"'/></p>";
                }
            }
            cats_ids.join(',');
            if(cats_ids == ""){
                layer.alert("未选类目");return false;
            }
            var goods_show_style = $(".gs_" + nodeid + ":checked").val();
            ajax_goods_table(goods_show_style, cats_ids ,str ,2);
        });

        $("#save_btn").click(function() {
            var postion = new Array();
            $.each($(".m_body .mod_list .sort_node"), function(i, item){postion.push(item.value)});
            $("#position_mod").val(postion.join(','));

            $("#diy_form").submit();
        });

        // 刷选条件 鼠标 移动进去 移出 样式
        $(".goods > table > thead > tr > th.mhover").mousemove(function(){
            $(this).addClass('thOver');
        }).mouseout(function(){
            $(this).removeClass('thOver');
        });
    });

    function changeBlankVal(obj){
        $(obj).parents(".mod_list").height($(obj).val());
    }
    function changeNavVal(obj){
        $(obj).parents(".mod_list").find(".text_nav").text($(obj).val());
    }
    function changeLineBorderStyle(obj){
        $(obj).parents(".mod_list").find(".line_fill").css({borderBottomStyle:$(obj).val()});
    }
    function changeLineWidthStyle(obj){
        $(obj).parents(".mod_list").find(".line_fill").css({width:($(obj).val()) + "%"});
    }

    ajax_get_table(1);
    // ajax 抓取页面 form 为表单id  page 为当前第几页
    function ajax_get_table(page){
        cur_page = page; //当前页面 保存为全局变量
        $.ajax({
            type : "POST",
            url:"{:U('Diy/ajax_goods_list')}",
            data : {
                p :page,
                g_name :$("#g_name").val()
            },
            success: function(data){
                $("#ajax_return_goods").html('');
                $("#ajax_return_goods").append(data);
            }
        });
    }

    ajax_getcate_table(1);
    // ajax 抓取页面 form 为表单id  page 为当前第几页
    function ajax_getcate_table(page){
        cur_page = page; //当前页面 保存为全局变量
        $.ajax({
            type : "POST",
            url:"{:U('Diy/ajax_cates_list')}",
            data : {
                p :page,
                cate_name :$("#cate_name").val()
            },
            success: function(data){
                $("#ajax_return_cates").html('');
                $("#ajax_return_cates").append(data);
            }
        });
    }

    ajax_choisecats_table(1);
    // ajax 抓取页面 form 为表单id  page 为当前第几页
    function ajax_choisecats_table(page){
        cur_page = page; //当前页面 保存为全局变量
        $.ajax({
            type : "POST",
            url:"{:U('Diy/ajax_choises_cates')}",
            data : {
                p :page,
                cname :$("#cname").val()
            },
            success: function(data){
                $("#ajax_choises_cates").html('');
                $("#ajax_choises_cates").append(data);
            }
        });
    }

    ajax_choisegoods_table(1);
    // ajax 抓取页面 form 为表单id  page 为当前第几页
    function ajax_choisegoods_table(page){
        cur_page = page; //当前页面 保存为全局变量
        $.ajax({
            type : "POST",
            url:"{:U('Diy/ajax_choises_list')}",
            data : {
                p :page,
                gname :$("#gname").val()
            },
            success: function(data){
                $("#ajax_choises_goods").html('');
                $("#ajax_choises_goods").append(data);
            }
        });
    }
    function ajax_goods_table(goods_show_style ,_ids ,str ,type)
    {
        $.ajax({
            type : "POST",
            url:"{:U('Diy/ajax_goods_table')}",
            data : {
                ids : _ids,
                goods_style :goods_show_style,
                data_type: type
            },
            success: function(data){
                if(type == 1){
                    $("#goods" + nodeid).append(data);
                    $("#goods_added_" + nodeid).append(str);
                    $(".goods_id").prop("checked" ,false);
                    $(".choises_list").hide();
                }else{
                    $("#goods" + nodeid).append(data);
                    $("#goods_added_" + nodeid).append(str);
                    $(".cats_id").prop("checked" ,false);
                    $(".cates_choise_list").hide();
                }
            }
        });
    }

    // 上传商品图片成功回调函数
    function call_back(fileurl_tmp ,obj){
        $("#" + obj).val(fileurl_tmp);
        $("." + obj).attr('src', fileurl_tmp);
        $("#" + obj + 'img').attr('src', fileurl_tmp);
    }
</script>
<include file="common:__foot__"/>